My Jekyll learning notes

2023-03-13

Quick Start

  • jekyll new my-awesome-site — Create a new Jekyll site.
  • cd my-awesome-site — Enter the new directory.
  • bundle exec jekyll serve — Build and serve the site locally.

Notes for Jekyll Blog Building

  • :warning: Use JEKYLL_ENV=production bundle exec jekyll build to build for production, then copy _site contents to GitHub.
  • :warning: Restart the server after modifying _config.yml.
  • :warning: baseurl=/Blog should not end with a slash.
  • :warning: In navigation.yml, use link: /Blog/ (with trailing slash).

Jekyll Commands

  • bundle exec jekyll serve — Start local server (development).
  • JEKYLL_ENV=production bundle exec jekyll build — Build for production.
  • bundle exec jekyll serve --livereload — Serve with live reload.
  • bundle exec jekyll serve --draft — Serve including draft posts.

Jekyll Plugins

  • To change theme:
    • Search for jekyll-theme on rubygems.org.
    • Add to Gemfile (e.g., gem "jekyll-theme-hacker") and run bundle install.
    • Add theme: jekyll-theme-hacker to _config.yml.
    • Run bundle exec jekyll serve to use the new theme.

Jekyll Layouts

  • To add a new layout: Create post.html in _layouts with the desired front matter.

Jekyll Styling

  • Use <br> for line breaks.
  • Use <hr> for horizontal lines.

GitHub Pages

  • Build locally: JEKYLL_ENV=production bundle exec jekyll build.
  • Create branch: git checkout -b gh-pages.
  • Copy _site contents to root of gh-pages branch.
  • Push: git push origin gh-pages.

Resources